<template>
  <!-- html -->
  <div class="person">
    <h2>姓名:{{ name }}</h2>
    <h2>年龄:{{ age }}</h2>
    <h2>地址:{{ address }}</h2>
    <button @click="showTel">查看联系方式</button>
    <button @click="changeAge">修改年龄</button>
    <button @click="changeName">修改姓名</button>
  </div>
</template>

<!-- <script lang="ts">
// JS或TS 脚本标签
//export default 倒数模块的意思
export default {
  name: 'person',//组件名
}
</script> -->

//再写一个script相当于写了一个setup函数，且自动范围，不用再写return
//这样能够每次添加显示信息变量时 不用再在return里面再写了
<script lang='ts' setup name="Person">//安装一个 插件 npm i vite-plugin-vue-setup-extend -D 就可以少写一个为了命名而写的script
//console.log(this) //setup函数中this是undefined,Vue3已经开始弱化this
//数据 原来是写在data中的，此时name，age，tel都不是响应式的

//ref即数据变量变为动态的了 即为响应式,且要变化的变量在方法中都要.value
import { ref } from 'vue'
let name = ref('张三')
let age = ref(18)
let tel = '1388888888'
let address = '湖南省株洲市荷塘区'

console.log(1, name)
console.log(2, age)
console.log(3, tel)
console.log(4, address)

//方法 也就是函数
function changeName() {
  name.value = 'zhang-san'//这样修改name，页面时没有变化的
  console.log(name) //name确实该了，但name不是响应式的
}
function changeAge() {
  age.value += 1
}
function showTel() {
  alert(tel)
}
//将数据 方法交出去 模板中才可以使用(模板也就是在html那一部分使用)

</script>

<style scoped>
/* 样式 */
.person {
  background-color: #eee;
  box-shadow: 0 0 10px;
  border-radius: 10px;
  padding: 20px;
}
</style>